<template>
	<view>
		<view v-for="(item, index) in newsList" :key="index">
			<navigator class="one-new" open-type="navigate" :url="'/subpages/newinfo/newinfo?id=' + item.id">
				<view class="left">
					<view class="title u-line-2">{{ item.title }}</view>
					<view class="uinfo">
						<view class="iview">
							<view class="utime">
								<text class="name">{{ item.author }}</text>
							</view>
						</view>
						<text class="uptime">{{ item.created_at | timeFormate }}发布</text>
					</view>
				</view>
				<view class="right"><image class="pic" mode="aspectFill" :src="item.cover" /></view>
			</navigator>
		</view>
	</view>
</template>

<script>
import { getNews } from '../../common/api.js';
import timeFrom from '../../tools/timeFrom.js';
export default {
	data() {
		return {
			// 资讯列表数据
			newsList: []
		};
	},
	onLoad() {
		// 请求新闻列表数据
		this.getNewsList();
	},
	filters: {
		timeFormate(timeDate) {
			let Time = new Date(timeDate);
			let timestemp = Time.getTime();
			let t = timeFrom(timestemp, 'yyyy年mm月dd日');
			return t;
		}
	},
	methods: {
		// 获取新闻列表数据
		async getNewsList() {
			let res = await getNews();
			console.log(res);
			const newsRes = res.map(item => {
				return {
					...item,
					cover: this.BaseFileURL + item.image.id
				};
			});
			this.newsList = [...this.newsList, ...newsRes];
		}
	},
	onReachBottom() {
		this.getNewsList();
	},
	onPullDownRefresh() {
		this.newsList = [];
		this.getNewsList();
		uni.stopPullDownRefresh();
	}
};
</script>

<style lang="scss" scoped>
.one-new {
	width: 700upx;
	height: 74px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: center;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left: 25upx;
	padding-right: 25upx;
	border-bottom: 1px solid #f1f1f1;

	.left {
		width: 490upx;
		height: 140upx;
		text-align: left;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;

		.title {
			font-size: 30upx;
			line-height: 42upx;
			color: #001432;
			margin-top: 21upx;
		}

		.uinfo {
			width: 490upx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			align-content: center;
			margin-top: 6upx;
			font-size: 20upx;
			color: #999;

			.utime {
				font-size: 24upx;

				.name {
					max-width: 120upx;
					color: #777;
				}
			}
		}
	}

	.right {
		width: 120upx;

		.pic {
			width: 120upx;
			height: 120upx;
			margin-top: 20upx;
			border-radius: 6upx;
		}
	}
}
</style>
